﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="IHaveBaby.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
.lightbox{width:300px;background:#FFFFFF;border:1px solid #ccc;line-height:25px; top:20%; left:20%;}
.lightbox dt{background:#f4f4f4; padding:5px;}
</style>
    <link rel="stylesheet" href="/jquery.ui/css/base2.css" type="text/css" media="all" /> 
    <link type="text/css" href="/jquery.ui/css/redmond/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="/jquery.ui/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="/jquery.ui/js/jquery-ui-1.8.13.custom.min.js"></script>
    <script type="text/javascript" src="/jquery.ui/development-bundle/ui/minified/jquery.ui.autocomplete.min.js"></script>
    <script type="text/javascript" src="/scripts/jquery.json-2.2.min.js"></script>
    <script type="text/javascript" src="/jquery.ui/development-bundle/ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
    <script type="text/javascript" src="/scripts/Jquery-custom.js"></script>
        <script type="text/javascript" src="/scripts/Jquery-mask.js"></script>

    <script type="text/javascript">

        $(function () {
            $("#btnMask").click(function () {
                var box = new LightBox("idBox");
                box.Show({ Center: true });
                $.ajax({
                    url: "/WebForm2.aspx/GetSource",
                    //data: { id: record.id },
                    success: function (result) {
                        // alert(result);
                        setInterval(function () { box.Close(); }, 1000);

                    }
                });

            });


            $("#div1").custom("1");
            $("#div2").custom("2");

            $("#div1").custom("doing");
            $("#div2").custom("doing");
            $(".btShowDialog").button();
            $(".btShowDialog").bind("click", openDialog);
            $("#tabs").tabs();
            $("#autocomplete").autocomplete({ source: "/WebForm2.aspx/GetSource" });
            $("#btn").button();
            $("#btn").bind("click", openDialog);
            $("#datepicker").datepicker({ changeYear: true, changeMonth: true });

        });
        var openDialog = function () {
            $("#dialog-modal").dialog({ modal: true });
            return false;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <input type="button" id="btnMask" value="showmask" />

<dl id="idBox" class="lightbox">
  <dt id="idBoxHead"><b>LightBox</b> </dt>
  <dd>
    内容显示
    <br /><br />
    <input name="" type="button" value=" 关闭 " id="idBoxCancel" />
    <br /><br />
  </dd>
</dl>
    <div id="div1">
        
    </div>
    <div id="div2"></div>
    <input id="autocomplete" />
    <div id="tabs" style="width:500px;height:300px">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
        </ul>
        <div id="tabs-1">
            <p>
                First content</p>
        </div>
        <div id="tabs-2">
            <p>
                Second content</p>
        </div>
    </div>
    <input type="button" class="btShowDialog" value="show dialog" />
    <div style="display: none">
        <div id="dialog-modal" title="test ">
            <p>
                Adding the modal overlay screen makes the dialog look more prominent because it
                dims out the page content.</p>
            <p>
                Adding the modal overlay screen makes the dialog look more prominent because it
                dims out the page content.</p>
            <p>
                Adding the modal overlay screen makes the dialog look more prominent because it
                dims out the page content.</p>
            <p>
                Adding the modal overlay screen makes the dialog look more prominent because it
                dims out the page content.</p>
            <p>
                Adding the modal overlay screen makes the dialog look more prominent because it
                dims out the page content.</p>
        </div>
    </div>
    <INPUT id=datepicker type=text />
    <asp:Button runat="Server" ID="btn" Text="button" onclick="btn_Click" />
    </form>
</body>
</html>
